let layer;
let form;
layui.use(['layer', 'form'], function() {
  layer = layui.layer;
  form = layui.form;


  // ***********************************1.加载分类下拉选择
  $("select").append(`<option value="">请选择文章类别</option>`)
  $.ajax({
    url: "/my/article/cates",
    success: function(res) {
      if (res.status == 0) {
        $.each(res.data, function(index, item) {
          let one = $(`<option value=${item.Id}>${item.name}</option>`);
          $("select").append(one);
        });

        form.render('select'); //页面渲染元素重新渲染下
      }
    }
  });


  // **********************************2.初始化富文本编辑器
  initEditor(); // 自己封装的


  // **********************************3.图片裁剪
  $('#image').cropper({
    aspectRatio: 10 / 7,
    preview: '.img-preview'
  });

  $("#file_cp").on("click", function() {
    $("#file").click(); // JS代码模拟点击行为
  });

  $("#file").on("change", function() {

    // 1.拿到图片信息
    let obj = this.files[0];


    // 2.需要把图片对象 转换为  临时图片地址
    let src = URL.createObjectURL(obj);

    // 3. 设置给 img；主要原因：$('#image')已经经过cropper插件处理 JQ对象；
    $('#image').cropper("replace", src);
  });


  // ***********************************4.发布
  $("form").on("submit", function(e) {
    e.preventDefault();


    // 1.收集数据
    let fd = new FormData(this);


    // 2.图片 cropper处理：blob二进制
    let canvas = $('#image').cropper('getCroppedCanvas', {
      width: 400,
      height: 280
    });
    canvas.toBlob(function(blob) {
      fd.append("cover_img", blob); // 多fd添加一项

      // ajax必须写toBlob回调函数内部
      $.ajax({
        url: "/my/article/add",
        type: "POST",
        data: fd,
        success: function(res) {
          layer.msg(res.message);
        },
        processData: false, // 不转换
        contentType: false, // 不编码
      });


    });





  });



})